<template>
  <view class="recorder">
    <NavbarRight
      leftIconColor="#333333"
      bgColor="transparent"
      isBack
      :left="{ imageUrl: leftImageUrl, width: '48rpx' }"
    />
    <view class="background"></view>
    <view class="head">
      <image :src="info.cover" mode="aspectFill" class="cover-image"></image>
      <view class="hot-info">
        <view class="hot-title ellipsis-3">
          {{ info.title }}
        </view>
        <view class="author">
          <!-- <text>作者：</text> -->
          <text>{{ info.subtitle }}</text>
        </view>
      </view>
    </view>
    <view class="content">
      <view class="article-body">
        <rich-text :nodes="info.content"></rich-text>
      </view>
    </view>
    <view class="recorder-player">
      <RecorderManager
        ref="recorderManager"
        @confirm="recorderConfirm"
      ></RecorderManager>
    </view>
  </view>
</template>

<script setup>
import NavbarRight from "@/components/navbar-right/index.vue";
import RecorderManager from "./components/recorder-manager.vue";
import { onLoad, onShow, onUnload } from "@dcloudio/uni-app";
import { ref, onUnmounted } from "vue";
import useRecorderStore from "@/store/recorder.js";
const recorderStore = useRecorderStore();
const { saveRecords, removeRecords } = recorderStore; // actions

import { getArticleInfo } from "@/api/article";

const leftImageUrl = ref("/static/images/login/loginfanhui@3x.png");
const id = ref("");
const info = ref({});
const editReciteId = ref("");

onLoad((options) => {
  if (options && options.id) {
    id.value = options.id;
    getDetail();
  }
  if (options.editReciteId) {
    editReciteId.value = options.editReciteId;
  }
});
onShow(() => {
  recorderManagerShow();
});
onUnload(() => {
  removeRecords();
  uni.$off("clear-recorder");
});
const getDetail = async () => {
  try {
    let res = await getArticleInfo({
      id: id.value,
    });
    info.value = res.data;
    console.log(info.value);
  } catch (e) {
    console.log(e);
    //TODO handle the exception
  }
};

const recorderManager = ref(null);
const recorderManagerShow = () => {
  recorderManager.value && recorderManager.value.onPageShow();
};
const recorderConfirm = (data) => {
  console.log("recorderConfirm", data);
  saveRecords(data);
  uni.$on("clear-recorder", () => {
    recorderManager.value.reset();
    removeRecords();
  });
  uni.$u.route({
    url: "/pages/article/recorder/player",
    params: {
      id: info.value.id,
      editReciteId: editReciteId.value,
    },
  });
};
</script>

<style lang="scss" scoped>
.recorder {
  position: relative;
  height: 100%;
  background: #ffffff;
  display: flex;
  flex-direction: column;

  .background {
    width: 100%;
    height: 780rpx;
    top: 0;
    left: 0;
    position: absolute;
    background: linear-gradient(180deg, #90e4ed 0%, #ffffff 100%);
  }

  .head {
    padding: 0rpx 32rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 80rpx;
    position: relative;
    z-index: 10;

    .cover-image {
      width: 196rpx;
      height: 260rpx;
      border-radius: 20rpx;
      background: #f4f5f7;
      margin-bottom: 40rpx;
    }

    .hot-info {
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: center;
      padding-top: 20rpx;

      .hot-title {
        font-size: 44rpx;
        font-weight: bold;
        color: #1a1a1a;
        line-height: 58rpx;
      }

      .author {
        font-size: 28rpx;
        color: #939999;
        line-height: 28rpx;
        margin-top: 20rpx;
      }
    }
  }

  .content {
    height: 100%;
    position: relative;
    overflow-y: auto;
    z-index: 10;
    padding: 20rpx 32rpx;

    .article-body {
      font-size: 28rpx;
      line-height: 44rpx;
      color: #939999;
      // height: 176rpx;
      // overflow-y: auto;
    }
  }

  .recorder-player {
    position: relative;
    z-index: 10;
    padding: 60rpx 32rpx;
  }
}
</style>
